var vm = new Vue({
    el: '#rrapp',
    data: {
        model10: [],
        kpiTargetList: [
            {
                value: 'PMWCL',
                label: 'PM完成率',
                index: 1
            },
            {
                value: 'PMYQL',
                label: 'PM延期率',
                index: 1
            },
            {
                value: 'MTBF',
                label: 'MTBF',
                index: 3
            },
            {
                value: 'MTTR',
                label: 'MTTR',
                index: 3
            },
            {
                value: 'OEE',
                label: 'OEE',
                index: 3
            },
            {
                value: 'QTJTXSJ',
                label: '千台机停线时间',
                index: 3
            },
            {
                value: 'SBKDL',
                label: '设备开动率',
                index: 4
            }
        ],
        deviceOrganizationList: [],
        q: {
            deviceOrganizationId: '', // 设备组织ID
            deviceOrganizationCode: '', // 设备组织编码
            targetList: [],  // 维度列表
            level: 1,
            yearly: ''
        },
        deviceOrganization: '江北发动机NE1工厂' // 设备组织名称
    },
    methods: {
        changeArea: function (value, selectedData) {
            if (selectedData.length == 0) {
                // 说明展示工厂级别
                this.q.deviceOrganizationId = '01';
                this.q.level = 1;
                this.deviceOrganization = '江北发动机NE1工厂';
            } else {
                this.q.deviceOrganizationId = selectedData[selectedData.length - 1].value;
                this.q.deviceOrganizationCode = selectedData[selectedData.length - 1].code;
                this.q.level = selectedData[selectedData.length - 1].level;
                this.deviceOrganization = selectedData[selectedData.length - 1].label;
            }
            // 清空kpi维度
            this.showableTargetList = [];
        },
        loadAndRenderKpiView: function () {
            var _this = this;
            var param = {};
            if (!_this.q.deviceOrganizationId) {
                param.deviceOrganizationId = '01';
                param.level = 1;
                param.deviceOrganizationCode = '';
            }else{
                param.deviceOrganizationId = _this.q.deviceOrganizationId;
                param.level = _this.q.level;
                param.deviceOrganizationCode = _this.q.deviceOrganizationCode;
            }
            if(this.q.targetList.length > 0){
                param.targetList = this.q.targetList;
            }else{
                param.targetList = ['PMWCL', 'PMYQL'];
            }

            if (_this.q.yearly) {
                param.yearly = new Date(_this.q.yearly).getFullYear();
            } else {
                param.yearly = new Date().getFullYear();
            }
            // 加载设备组织列表
            Ajax.request({
                url: "../kpi/stat",
                params: JSON.stringify(param),
                type: "POST",
                contentType: "application/json",
                successCallback: function (res) {
                    _this.renderKpiView(res.kpiOptions);
                }
            });
        },
        reset: function(){
            // 重置检索条件
            this.q = {
                deviceOrganizationId: '', // 设备组织ID
                deviceOrganizationCode: '', // 设备组织编码
                targetList: [],  // 维度列表
                level: 1,
                yearly: ''
            }
        },
        renderKpiView: function (kpiOptionList) {
            let _this = this;
            $('#main').empty()
            for (let i = 0; i < kpiOptionList.length; i++) {
                let kpiOption = kpiOptionList[i];
                let chartId = kpiOption.targetValue;
                let chartDomStr = '<div style="width: 50%;height: 60%;" id="' + chartId + '"></div>'
                $('#main').append(chartDomStr)
                let option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [kpiOption.targetLabel]
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            magicType: {show: true, type: ['line', 'bar']},
                            dataView: {show: true, readOnly: false},
                            saveAsImage: {show: true}
                        },
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params) {
                            var tar = params[1];
                            return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value + kpiOption.unit;
                        }
                    },
                    calculable: true,
                    xAxis: {
                        type: 'category',
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    },
                    yAxis: {
                        type: 'value',
                        max: (kpiOption.max?kpiOption.max:null),
                        axisLabel:{
                            formatter: '{value}' + kpiOption.unit
                        }
                    },
                    series: [
                        {
                            name: kpiOption.targetLabel,
                            type: 'bar',
                            barWidth: 20,
                            label: {
                                show: true,
                                position: "top",
                                formatter:  function(params){
                                    return kpiOption.seriesData[params.dataIndex]
                                },
                                fontWeight: 'bold',
                                color: 'blue'
                            },
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function(params) {
                                        return '#2f4554';
                                    }
                                }
                            },
                            data: kpiOption.seriesData,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                echarts.init(document.getElementById(chartId)).setOption(option);
            }
        },
        loadDeviceOrganization: function () {
            let _this = this;
            // 加载设备组织列表
            Ajax.request({
                url: "../sys/dept/loadDeviceOrganization",
                type: "GET",
                contentType: "application/json",
                successCallback: function (res) {
                    _this.deviceOrganizationList = res.deviceOrganizationList
                }
            });
        }
    },
    mounted: function () {
        // 加载设备组织结构
        this.loadDeviceOrganization();
        // 加载工厂KPI
        this.loadAndRenderKpiView();
    }
});